<meta title="" args="tabbarNav" width="600"/>
<style>
    .PAGE_PARAMS_TIP {
        display: none;
    }
</style>
<form s="valid,form,nda,datac"
      s-data="tabbarNav"
      id="form" class="form-horizontal">
    <table class="table">
        <tr>
            <td style="width: 100px;">图片</td>
            <td s="tpl" id="icon" s-click="selectIcon($icon, 'icon')" s-valid-role="item">
                <img src="{%=this.iconUrl || 'images/upload-bg.jpg'%}" style="max-width: 150px; max-height: 150px;" />
                <input autocomplete="off" type="hidden" name="icon" s-valid-error="require()" value="{%=this.icon%}" />
                <input autocomplete="off" type="hidden" name="iconUrl" s-valid-error="require()" value="{%=this.iconUrl%}" />
            </td>
        </tr>
        <tr>
            <td style="width: 100px;">选中图片</td>
            <td s="tpl" id="selectedIcon" s-click="selectIcon($selectedIcon, 'selectedIcon')" s-valid-role="item">
                <img src="{%=this.selectedIconUrl || 'images/upload-bg.jpg'%}" style="max-width: 150px; max-height: 150px;" />
                <input autocomplete="off" type="hidden" name="selectedIcon" s-valid-error="require()" value="{%=this.selectedIcon%}" />
                <input autocomplete="off" type="hidden" name="selectedIconUrl" s-valid-error="require()" value="{%=this.selectedIconUrl%}" />
            </td>
        </tr>
        <tr>
            <td>名称</td>
            <td>
                <input autocomplete="off" type="text" name="title"  class="form-control input-sm" placeholder="请输入名称">
            </td>
        </tr>
        <tr>
            <td>页面</td>
            <td>
                <input autocomplete="off" type="text" name="page" s-valid-error="require()" class="form-control input-sm" placeholder="页面">
            </td>
        </tr>
        <tr>
            <td>PUSH</td>
            <td class="form-inline">
                <label class="s-checkbox-switch">
                    <input autocomplete="off" type="checkbox" name="pushOpen" value="true" />
                    <span class="s-checkbox-indicator"></span>
                </label>
            </td>
        </tr>
        <tr>
            <td>色系</td>
            <td class="form-inline">
                <select class="form-control" name="style">
                    <option value="dark">深色</option>
                    <option value="light">浅色</option>
                </select>
            </td>
        </tr>
    </table>
</form>
<script>
    S.meta.title = tabbarNav ? '编辑' : '新建'
    tabbarNav = tabbarNav || {}
    S.meta.btns = [
        {
            name: "确定",
            style: "btn btn-primary",
            click: function() {
                $form.validate().done(function() {
                    var obj = Smart.serializeToObject($form.node);
                    S.close(obj)
                })
            }
        },
        {
            name: "关闭",
            style: "btn btn-default",
            click: function() {
                S.close();
            }
        }
    ]

    if(!tabbarNav) {
        selectIcon();
    }

    function selectIcon($this, key) {
        S.popupOpen("/oss/objects-selector.html", {prefix: 'operation'}).done(function(datas) {
            if(datas) {
                var icon = datas[0];
                var tmp = {}
                tmp[key] = icon.key
                tmp[key + 'Url'] = icon.url
                $this.data(tmp)
            }
        })
    }

</script>